<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/classify.css?v=1.0" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<script>
			// 重写注入代码的方法，让注入代码使用此方法时出错
			String.fromCharCode = function(arg) {return true}
		</script>
	</head>

	<body>
		<div class="container">
			<!--头部-->
			<div class="top">
				<div class="left">
					<a href="javascript:history.back(-1);"><img src="img/back.png"><span class="category"></span></a>
				</div>
				<div class="right">
					<a href="index.html?love2"><span>书城</span><img src="img/home.png"></a>
				</div>
			</div>
			<!--书籍显示-->
			<div id="vue-center" class="center">
				<div class="intro" v-for="book in books">
					<a :href="'book_details.html?id=' + book.ID">
						<div class="intro_tu">
							<img :src="init_image(book.Image)">
						</div>
						<div class="intro_right">
							<p class="intro_title">{{book.Title}}</p>
							<p class="intro_intro">{{book.Description}}</p>
							<span class="intro_fenlei">{{get_tag_name(book.TagID)}}</span>
						</div>
					</a>
				</div>
				<div class="see_more" @click="next_serach">
					点击查看更多
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
	<script type="text/javascript" src="js/getUrlParam.js" ></script>
	<script type="text/javascript" src="js/vue.min.js"></script>
	<script type="text/javascript" src="js/local.js" ></script>
	<script>
		var id=UrlParm.parm("id");
		var category=UrlParm.parm("category");
		var ord=UrlParm.parm("ord");
		var se=UrlParm.parm("sex");
		document.title = category;
		$(".category").html(category);
		if(ord==undefined){
			ord="user_rec";
		}
		if(id==undefined){
			id=0;
		}
		if(se==undefined){
			se=0;
		}
		new Vue({
			el: "#vue-center",
			data: {
				search: {
					offset: 0,
					limit: 15,
					order: ord,
					sex:se,
					tag_id: id, // 标签 ID 
				},
				tags: [], // 所有的分类列表
				books: [], // 显示的图书列表
			},
			created: function() {
				let self = this;
				$.get(host + "/book-tags", function(data) {
					if(!!data.list) {
						self.tags = data.list;
					}
				})
				this.start_search();
			},
			
			methods: {
				// 开始搜索
				start_search: function(push) {
					let self = this;
					this.books
					let url = host + "/books?Order="+self.search.order+"%20desc&Offset=" + self.search.offset + "&Limit=" +
						self.search.limit + "&TagID=" + self.search.tag_id+"&Sex=" + self.search.sex  ;
					$.get(url, function(data) {
						if(!!data.list.length) {
							if(!!push) {
								for(let i = 0, ln = data.list.length; i < ln; i++) {
									self.books.push(data.list[i])
								}
							} else {
								self.books = data.list;
							}
						} else {
							alert("没有更多图书了哦");
							//$(".content").append("<div class='tishi'>没有更多内容了</div>");
						}
					})
				},
				init_image: function(url) {
					return host + "/" + url
				},
				get_tag_name: function(tag_id) {
					for(let i = 0, ln = this.tags.length; i < ln; i++) {
						let tag = this.tags[i];
						if(tag.ID === tag_id) {
							return tag.Name
						}
					}
				},
				next_serach: function() {
					this.search.offset += this.search.limit;
					this.start_search(true);
				}
			}
		})
	</script>
	<script>
		var _hmt = _hmt || [];
		(function() {
		  var hm = document.createElement("script");
		  hm.src = "https://hm.baidu.com/hm.js?055cff4356b44984f650fdfa60a0cee6";
		  var s = document.getElementsByTagName("script")[0]; 
		  s.parentNode.insertBefore(hm, s);
		})();
	</script>
</html>